<template>
	<view class="" v-if="timeTab && timeTab.length">
		<view class="time-tab flex align-items-center " v-if="type==='flex'">
			<view class="tab-item fcc mb-20" v-for="(item,index) in timeTab" :key="index"
				:class="{'tab-item-ac':index==timeIndex}" @click="changeTimeTab(index)"
				:style="{backgroundColor: bgcolor,marginRight:mr}">
				{{item.title}}
			</view>
		</view>
		<view class="time-tab flex align-items-center time-tab-grid" v-if="type==='grid'">
			<view class="tab-item fcc" v-for="(item,index) in timeTab" :key="index"
				:class="{'tab-item-ac':index==timeIndex}" @click="changeTimeTab(index)"
				:style="{backgroundColor: bgcolor}">
				{{item.title}}
			</view>
		</view>
		<view class="" v-if="!noShow">
			<view class="condition-moer row-box bgc-w" v-show="timeTab[timeIndex]&&timeTab[timeIndex].title==='自定义'">
				<view class="time-box fcc">
					<picker mode="date" :value="startTime" @change="getStartTime">
						<view class='fc-ac'>{{startTime?startTime:'选择起始时间'}}</view>
					</picker>
				</view>
				<view class="ml-30 mr-30 fc-9">
					至
				</view>
				<view class="time-box fcc">
					<picker mode="date" :value="endTime" @change="getEndTime">
						<view class='fc-ac'>{{endTime||'选择终止时间'}}</view>
					</picker>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				timeIndex: 0,
				timeTab: [],
				startTime: '',
				endTime: '',
			}
		},
		created() {
			this.init()
		},
		methods: {
			init() {
				this.timeTab = this.list
				this.timeIndex = this.index
			},
			getStartTime(e) {
				this.startTime = e.detail.value
				this.$emit('changeStartTime', this.startTime)
			},
			getEndTime(e) {
				this.endTime = e.detail.value
				this.$emit('changeEndTime', this.endTime)
			},
			changeTimeTab(i) {
				this.timeIndex = i
				this.$emit('changeTimeIndex', i)
				if (this.timeTab[this.timeIndex].title !== '自定义') {
					this.$emit('changeEndTime', ``)
					this.$emit('changeStartTime', ``)
				}
			},
		},
		watch: {
			index(newVal) {
				this.timeIndex = newVal
			},
			list(newVal) {
				this.timeTab = newVal
			}
		},
		props: {
			list: {
				type: Array,
				default: () => {
					return []
				}
			},
			index: {
				type: Number,
				default: 0
			},
			type: {
				type: String,
				default: 'flex'
			},
			bgcolor: {
				type: String,
				default: 'none'
			},
			noShow: {
				type: Boolean,
				default: false
			},
			mr: {
				type: String,
				default: '0'
			},
		}
	}
</script>

<style lang="scss" scoped>
	.time-tab {
		min-height: 100rpx;
		flex-wrap: wrap;

		.tab-item {
			padding: 16rpx 28rpx;
			border-radius: 12rpx;
		}

		.tab-item-ac {
			background-color: #E8FFFC !important;
			color: #00A191 !important;
		}
	}

	.time-tab-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-gap: 20rpx;
	}

	.condition-moer {
		width: 100%;
		height: 100rpx;
		padding: 0 30rpx;

		.time-box {
			width: 300rpx;
			height: 64rpx;
			border-radius: 8rpx;
			border: 2rpx solid #00A191;
		}
	}
</style>